
@charset "UTF-8";

@import 'function';
@import 'reset';
@import 'highlight';


/* General Style */

body {
	font-size: 16px;
	font-family: Helvetica, Arial, sans-serif;
	color: #52514c;
	background: #ffffff;
}

a {
	text-decoration: none;
	color: #4298BA;

	&:visited {
		color: #4298BA;
	}

	&:hover {
		color: #0F769F;
	}

	&:active {
		color:#9E792E;
	}

	&:hover, &:active {
		outline: 0;
	}
}


/* Layout */

.wrapper {
	width: 960px;
	margin: 0 auto;

	header {
		padding: 50px 0 15px;

		h1 {
			width: 300px;
			margin: 0 auto;
			padding: 130px 0 0 0;
			background-position: 4px 0;
			@include at2x('logo', 'png', 264px, 107px);

			a {
				display: block;
				width: 180px;
				height: 50px;
				margin: 0 auto;
				font-size: 50px;
				font-family: 'Myriad', 'Helvetica Neue', Helvetica;
				color: #3b5f6d;
				text-align: center;
				text-indent: -9999px;
				overflow: hidden;
				background-position: center 0;
				@include at2x('title', 'png', 171px, 39px);
			}
		}

		.desc {
			font-size: 19px;
			color: #9ba5a9;
			text-align: center;
		}
	}

	nav {
		text-align: center;
		padding: 26px 0;

		a {
			padding: 0 25px;
			font-size: 16px;
			color: #4f838f;
			line-height: 20px;

			&:hover {
				color: #666666;
			}

			&.active {
				color: #000000;
			}
		}
	}

	section {
		border-top: 2px solid #dee7ec;
	}

	footer {
		font-size: 14px;
		margin: 40px 0;
		color: #999999;
		text-align: center;

		a {
			color: #999999;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	#link-fork {
		display: block;
		width: 133px;
		height: 133px;
		position: absolute;
		top: 0;
		right: 0;
	}
}


/* Demo Page */

section#page-demo {
	border-top: none;

	#txt-content {
		display: none;
	}

	.simditor {
		box-shadow: 0 8px 40px rgba(0,0,0,0.15);
	}
}


/* Sidebar Page */

section.page-sidebar {
	position: relative;
	margin: 0 0 30px 0;

	aside {
		width: 180px;
		padding: 50px 0 0 0;
		position: absolute;
		top: 0;
		left: 0;

		ul {
			padding: 0 10px 0 60px;

			li {
				margin: 0 0 30px 0;
				position: relative;

				.icon {
					display: none;
					width: 10px;
					line-height: 20px;
					font-size: 14px;
					color: #000000;
					position: absolute;
					top: 0;
					left: -18px;
				}

				a {
					line-height: 20px;
					font-size: 18px;
					color: #a3afb2;

					&:hover {
						color: #666666;
					}
				}

				&.active {
					.icon {
						display: block;
					}

					a {
						color: #000000;
					}
				}
			}
		}
	}

	article {
		padding: 40px 20px 10px 60px;
		margin: 0 0 0 180px;
		min-height: 500px;
	}
}


/* Download Page */

section#page-download {
	min-height: 400px;

	.version {
		border-bottom: 1px solid #dfdfdf;

		.title {
			padding: 15px 15px;
			cursor: pointer;

			.icon {
				display: inline-block;
				width: 12px;
				line-height: 30px;
				font-size: 20px;
			}

			.name {
				font-size: 20px;
				line-height: 30px;
				font-weight: bold;
				margin: 0 20px;
			}

			.date {
				font-size: 16px;
				line-height: 30px;
				color: #aaaaaa;
			}

			.btn-download {
				display: inline-block;
				float: right;
				line-height: 30px;
				padding: 0 15px;
				font-size: 14px;
				color: #ffffff;
				background: #aaaaaa;
				border-radius: 3px;

				&:hover {
					background: #bbbbbb;
				}
			}
		}

		.release-notes {
			display: none;
			margin: 10px 0 25px 0;
			padding: 0 50px;
			list-style:disc outside none;

			li {
				margin: 0 0 10px 0;
			}
		}

		&.expand .release-notes {
			display: block;
		}
	}
}


/* Document Page */

section.page-doc {
	dt {
		border-top: 1px solid #ddd;
		margin-top: 30px;
		margin-bottom: 10px;
		padding-top: 20px;

		&:first-child {
			border-top: none;
			margin-top: 0;
			padding-top: 0;
		}

		& > span {
			margin-left: 10px;

			&:first-child {
				margin-left: 0;
			}
		}

		.name {
			font-size: 1.2em;
			font-weight: bold;
		}

		.param-type,
		.type {
			background-color: #efefef;
			border-radius: 3px;
			padding: 2px 6px;
			font-size: 0.8em;
			vertical-align: text-top;
		}

		.default {
			color: #aaa;
			font-size: 0.8em;
		}

		.params {
			&:before {
				content: "(";
			}

			&:after {
				content: ")";
			}

			.param:after {
				content: ",";
				margin: 0 6px 0 3px;
			}

			.param:last-child:after {
				content: "";
				margin: 0;
			}
		}

		.return {
			font-size: 0.8em;
			color: green;
		}
	}

	dd {
		display: none;

		&.expand {
			display: block;
		}
	}

}


/* Extension Page */

section#page-extension {
	article {
		padding: 40px 130px 10px;

		#btn-submit-extension {
			margin: 20px 0 0 0;
			display: inline-block;
			padding: 6px 12px;
			color: #ffffff;
			background: #aaaaaa;
			border-radius: 4px;

			&:hover {
				background: #bbbbbb;
			}
		}
	}
}
